<!DOCTYPE html>
<html>
<head>
	<title>Bus/总线/发布订阅/观察者模式</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		
		
	</style>
</head>
<body>
	<div id="app">
		<component :is="type"></component>
	<!-- 	<componnet>是vue自带的动态组件，依靠:is的值来确定显示哪个组件，:is的值便为当前渲染的组件名，可改变 -->
		<button @click="handle">点我</button>
		
		
	</div>
</body>
<script type="text/javascript">

	Vue.component("child-one",{

		template: "<div v-once>child-one</div>"
		//v-once可以有效提高静态内容的展示效率，如加了这个指令的组件创建渲染时，系统会把这个组件放到内存中，下一次在需要被渲染时，便可以直接从内从内存中取出，并不需要重新创建，这样在一定程度上提高了性能。
		
	})
	Vue.component("child-two",{

		template: "<div>child-two</div>"
		
	})
	

	var vm = new Vue({
		el:"#app",
		data:{
			type:"child-two"
	
		},
		methods: {
			handle:function() {
				this.type = this.type == "child-one" ? "child-two" : "child-one"
			}
		}

	})



		
</script>
</html>